<template>
   <div class="task-editor" v-if="true === visible">
    <div class="task-form" >
      <div class="task-form-row">
        <label >标题</label>
        <input placeholder="任务标题" type="text" v-model="form.title" >
      </div>
      <div  class="task-form-row" >
        <label >备注</label>
        <textarea  placeholder="任务备注"  rows="5" v-model="form.content"  ></textarea>
      </div>
      <div class="task-form-row" >
        <label >开始时间</label>
        <input  placeholder="开始日期"  type="date"  v-model="form.dt_fr_da" >
        <input  placeholder="时间"  type="time"  v-model="form.dt_fr_tm" >
      </div>
      <div class="task-form-row" >
        <label >结束时间</label>
        <input   placeholder="结束日期" type="date"  v-model="form.dt_to_da" >
        <input   placeholder="时间" type="time"  v-model="form.dt_to_tm" >
      </div>
      <div class="task-form-row" >
        <button v-if="btns['finish']" @click.stop="onFinish" class="btn success">
          <span>{{form.done ? '未完成' : '完成' }}</span>
        </button>
         <button v-if="btns['new']" @click.stop="onSubmit" class="btn btn-big">
          <span>新建</span>
        </button>
        <button v-if="btns['edit']" @click.stop="onSubmit" class="btn  btn-big">
          <span>修改</span>
        </button>
        <button @click.stop="onClose" class="btn negative">
          <span>收起</span>
        </button>
        <button v-if="form.id > 0" @click.stop="onDelete" class="btn negative">
          <span>删除</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export const TASK_INFO = {
  c_id: 0,
  index: 0,
  id: 0,
  title: '',
  content: '',
  dt_fr_da: moment().format('YYYY-MM-DD'),
  dt_fr_tm: moment().format('HH:00:00'),
  dt_to_da: moment().add(1, 'd').format('YYYY-MM-DD'),
  dt_to_tm: moment().format('HH:00:00'),
  dt_fr: '',
  dt_to: '',
  pre_id: '',
  done: false
}
export default {
  name: 'HelloWorld',
  props: ['task_info', 'visible', 'btns'],
  data () {
    return {
      form: {
        c_id: 0,
        index: 0,
        id: 0,
        title: '',
        content: '',
        dt_fr_da: moment().format('YYYY-MM-DD'),
        dt_fr_tm: moment().format('HH:00:00'),
        dt_to_da: moment().add(1, 'd').format('YYYY-MM-DD'),
        dt_to_tm: moment().format('HH:00:00'),
        dt_fr: '',
        dt_to: '',
        pre_id: '',
        done: false
      }
    }
  },
  mounted () {},
  watch: {
    visible: function (vn, vo) {
      // console.log(this.props)
      if (vn) this.form = this.task_info
      else this.form = TASK_INFO
    }
  },
  methods: {
    handelShowEditor: function () {
      this.editor_show = true
    },
    onFinish: function () {
      this.$emit('finish', {
        ...this.form
      })
    },
    onClose: function () {
      this.$emit('close')
    },
    onSubmit: function () {
      this.$emit('submit', {
        ...this.form
      })
    },
    onDelete: function () {
      this.$emit('delete', {
        ...this.form
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.task-form {
  text-align: left;
  padding: 20px;
}

.task-form-row {
  margin: 4px auto;
  display: flex;
}

.task-form label {
  font-size: 16px;
  vertical-align: top;
  width: 100px;

}

.task-form input,
.task-form textarea {
  border: 1px solid #EEE;
  border-radius: 8px;
  box-shadow: none;
  outline: none;
  font-size: 16px;
  padding: 8px 10px;
  flex: 1;
}

</style>
